import React, { Component } from 'react'
import {View} from "@tarojs/components";
import Taro from "@tarojs/taro"

import {analysisEmotional} from "../api/opinion";
import "./index.less"
import getColorByIndex from "../utils/color";
import Chart from "./charts/charts";




export default class Yu extends Component{


  setChartOptions(chart) {
    analysisEmotional("2020-10-20","2020-10-26").then(res=>{
      console.log(res)
      const data = res.data.data;

      const total = res.data.data.reduce((all,item)=> {
        if(typeof all !=="number"){
          all = Number(all.y)
        }
        return all+Number(item.y)
      })
      console.log(total);


      var option = {
        tooltip: {
          trigger: 'item',
          formatter: "{a} \n {b}: {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          top: 'middle',
          left: '60%',
          formatter: function (name) {
            const value = data.find(item => item.x === name);
            return name + '    ' + Math.round(Number(value.y) * 100 / total) +'%' ;
          },
          data: data.map(item => (item.x)),
          textStyle: {
            color:"auto",
            padding: [10, 0]
          }
        },
        series: [
          {
            name: '情感分析',
            type: 'pie',
            center: ['30%', '50%'],
            radius: ['40%', '59%'],
            // radius: '59%',
            // roseType:'radius',
            hoverOffset: 2,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold',
              }
            },
            itemStyle: {
              color: function (param) {
                return getColorByIndex(param.dataIndex);
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: data.map(item =>( {
              name: item.x,
              value:item.y
            }))
          }
        ]

      };
      chart.setOption(option);
    })
  }

  render(){
    let height = Taro.pxTransform(350)
    return (
      <View>
        <View className="topTitle">
          舆情分析
        </View>
        <Chart setChartOptions={this.setChartOptions.bind(this)} height={height}></Chart>
      </View>
    )
  }
}

